<template>
  <div class="addClinic">
    <!-- 代理商基本信息 -->

    <div class="addClinicTitle"><span></span>代理商基本信息</div>
    <div style="width: 80%; padding-top: 30px">
      <div class="flexLeft">
        <div class="inputTitle">代理商名称</div>
        <el-input
          v-model="sendMsg.agentName"
          placeholder="请输入诊所名称"
        ></el-input>
      </div>
      <div class="flexLeft">
        <div class="inputTitle">所在省市</div>
        <el-select
          v-model="sendMsg.proCode"
          placeholder="省份"
          class="selectLab"
          @change="provinceChange"
        >
          <el-option
            v-for="item in province"
            :key="item.areaId"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="sendMsg.cityCode"
          placeholder="城市"
          class="selectLab marginLab"
          @change="cityChange"
        >
          <el-option
            v-for="item in city"
            :key="item.areaId"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="sendMsg.areaCode"
          placeholder="选择区"
          class="selectLab marginLab"
        >
          <el-option
            v-for="item in area"
            :key="item.areaId"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </div>
      <div class="flexLeft">
        <div class="inputTitle">详细地址</div>
        <el-input
          v-model="sendMsg.address"
          type="text"
          class="longInput"

          placeholder="请输入详细门诊地址"
        ></el-input>
      </div>
      <div class="flexLeft">
        <div class="inputTitle">联系人</div>
        <el-input
          v-model="sendMsg.contacts"
          placeholder="请输入联系人姓名"
        ></el-input>
      </div>
      <div class="flexLeft">
        <div class="inputTitle">联系电话</div>
        <el-input
          v-model="sendMsg.officeTel"
          placeholder="请输入联系电话"
        ></el-input>
      </div>
      <div class="flexLeft">
        <div class="inputTitle">移动电话</div>
        <el-input
          v-model="sendMsg.mobile"
          placeholder="请输入联系电话"
        ></el-input>
      </div>
      <div class="flexLeft">
        <div class="inputTitle">所属销售</div>
        <el-input
          v-model="sendMsg.salesId"
          placeholder="请输入销售姓名"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script>
// 引入请求
import { saleArea } from '@/api/order';

import { agentAdd, agentSearchId, edit } from '@/api/agent';

// import { getUUID } from '@/utils/index';
export default {
  data() {
    return {
      imgUrl: '',
      // 上传的地址
      uploadImgUrl: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '1',
          label: '北京烤鸭'
        },
        {
          value: '2',
          label: '北京烤鸭'
        },
        {
          value: '3',
          label: '北京烤鸭'
        },
        {
          value: '4',
          label: '北京烤鸭'
        },
        {
          value: '5',
          label: '北京烤鸭'
        },
        {
          value: '6',
          label: '北京烤鸭'
        },
        {
          value: '7',
          label: '北京烤鸭'
        },
        {
          value: '8',
          label: '北京烤鸭'
        },
        {
          value: '9',
          label: '北京烤鸭'
        }
      ],
      value: '',
      input: '',
      sendMsg: {
        agentName: '',
        address: '',
        cityCode: '',
        contacts: '',
        mobile: '',
        officeTel: '',
        proCode: '',
        salesId: ''
      },
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: ''
      },
      province: [],
      city: [],
      area: []
    };
  },

  mounted() {
    // 获取下拉框数据
    this.$nextTick(() => {
      this.initData();
    });
  },
  methods: {
    initData(callback) {
      saleArea({ parentAreaId: '-1', sonlevel: '1' })
        .then((res) => {
          this.province = res;
          callback && callback(this.province);
        })
        .catch((er) => {});
    },
    // 省切换
    provinceChange(code, callback) {
      let parentAreaId = 0;
      this.province.forEach((item) => {
        if (item.code === code) {
          parentAreaId = item.areaId;
          saleArea({ parentAreaId, sonlevel: '2' })
            .then((res) => {
              this.city = res;
              callback && callback(this.city);
            })
            .catch((er) => {
              this.city = [];
            });
        }
      });
    },
    cityChange(code, callback) {
      let parentAreaId = 0;
      this.city.forEach((item) => {
        if (item.code === code) {
          parentAreaId = item.areaId;
          saleArea({ parentAreaId, sonlevel: '3' })
            .then((res) => {
              this.area = res;
              callback && callback();
            })
            .catch((er) => {
              this.area = [];
            });
        }
      });
    },
    // 新建代理商
    addFn() {
      // var that = this;
      agentAdd(this.sendMsg).then((res) => {
        this.$emit('changeContentDialog', false);
      });
    },
    // 编辑代理商
    editFn() {
      delete this.sendMsg.createDate;
      delete this.sendMsg.updateDate;
      delete this.sendMsg.userId;
      edit(this.sendMsg).then((res) => {
        this.$emit('changeContentDialog', false);
      });
    },
    // 创建清空数据
    addAgent() {
      this.sendMsg = {
        agentName: '',
        address: '',
        cityCode: '',
        contacts: '',
        mobile: '',
        officeTel: '',
        proCode: '',
        salesId: ''
      };
    },
    // 编辑获取数据
    getsendMsg(id) {
      this.initData(() => {
        agentSearchId(id).then((res) => {
          this.provinceChange(res.proCode, () => {
            this.cityChange(res.cityCode, () => {
              for (var key in res) {
                for (var k in this.sendMsg) {
                  if (key === k) {
                    this.sendMsg[k] = res[key];
                  }
                }
              }
            });
          });
          this.sendMsg = res;
        });
      });
    }
  }
};
</script>

<style scoped lang='scss'>
// .avatar-uploader .el-upload {
//   border: 1px dashed #d9d9d9;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
// }
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.flexLeft {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  .inputTitle {
    width: 105px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 26px;
    color: #999999;
  }
  .el-select{
    width: 132px;
    margin-right: 18px;
  }
  .el-input {
    width: 240px;
    >>> .el-input__inner {
      height: 42px;
      width: 100%;
    }
  }
  .longInput{
    width: 566px;
  }
}
.addClinic {
  font-size: 16px;
  padding-left: 64px;
  .addClinicTitle {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 21px;
    color: #333333;
    opacity: 1;
    span {
      display: inline-block;
      margin-right: 6px;
      width: 3px;
      height: 18px;
      background: #508fcc;
      opacity: 1;
      vertical-align: middle;
    }
  }
  //   表单标题
  .inputTitle {
    white-space: nowrap;
    padding-right: 32px;
  }
  .inputTitle::before {
    content: " ";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ea5f5f;
    border-radius: 4px;
    margin: 0 4px 2px 0;
  }
  // 不带点的标题
  .inputTitleNopoint {
    white-space: nowrap;
    padding-right: 32px;
    padding: 0 32px 0 12px;
  }
}
</style>
